home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap23 / dun23_6.txt < prev    next >
Encoding:
Text File  |  1997-12-18  |  2.3 KB  |  56 lines
  1. <html>
  2.  
  3. <head>
  4.  
  5. <title>Dynamic Layer Content</title>
  6.  
  7. </head>
  8.  
  9. <body bgcolor="white">
  10.  
  11. <script language="Javascript1.2">
  12.  
  13. <!--//
  14.  
  15.  
  16.  
  17. //The growPic and shrinkPic functions resize the layers and
  18.  
  19. //use the document.write() method to replace the layer's content
  20.  
  21. //with the same image, width larger or smaller height and width
  22.  
  23. //values.
  24.  
  25.  
  26.  
  27. function growPic(targetLayer, img, height, width) {
  28.  
  29.    if((targetLayer.clip.height <= height) || (targetLayer.clip.width <= width)) {
  30.  
  31.       if (targetLayer.clip.height <= height) targetLayer.clip.height = targetLayer.clip.height + 1;
  32.  
  33.       if (targetLayer.clip.width <= width) targetLayer.clip.width = targetLayer.clip.width  + 1;
  34.  
  35.       targetLayer.document.write("<img src='" + img + "' width="+targetLayer.clip.width+" 
  36. height="+targetLayer.clip.height+">");
  37.  
  38.       targetLayer.document.close();
  39.  
  40.       setTimeout('growPic(document.layers["'+targetLayer.name+'"],"'+img+'",'+height+','+width+')',1);
  41.  
  42.   }
  43.  
  44. }
  45.  
  46.  
  47.  
  48. function shrinkPic(targetLayer, img, height, width) {
  49.  
  50.    if((targetLayer.clip.height >= height) || (targetLayer.clip.width >= width)) {
  51.  
  52.       if (targetLayer.clip.height >= height) targetLayer.clip.height = targetLayer.clip.height - 1;
  53.  
  54.       if (targetLayer.clip.width >= width) targetLayer.clip.width = targetLayer.clip.width  - 1;
  55.  
  56.       targetLayer.document.write("<img src='" + img + "' width="+targetLayer.clip.width+" 
  57. height="+targetLayer.clip.height+">");
  58.  
  59.       targetLayer.document.close();
  60.  
  61.       setTimeout('shrinkPic(document.layers["'+targetLayer.name+'"],"'+img+'",'+height+','+width+')',1);
  62.  
  63.   }
  64.  
  65.  
  66.  
  67. }
  68.  
  69.  
  70.  
  71. //-->
  72.  
  73. </script>
  74.  
  75. <body bgcolor="white">
  76.  
  77. <layer id="control" height=40 width=100 top=4 left=0>
  78.  
  79. <!--- notice how the script is called 'parent.window.document' -->
  80.  
  81. <!--- this is used to call scripts in other windows and other -->
  82.  
  83. <!--- child layers within the document. A necessary evil sometimes.-->
  84.  
  85. <form>
  86.  
  87. <input type="button" value="Grow"
  88.  
  89.    onClick="growPic(parent.window.document.layers['puppy'], 'puppy.gif',100,100)"><input
  90.  
  91.    type="button" value="Shrink"
  92.  
  93.    onClick="shrinkPic(parent.window.document.layers['puppy'], 'puppy.gif',25,25)">
  94.  
  95. </form>
  96.  
  97. </layer>
  98.  
  99. <layer id="puppy" height=50 width=50 top=44 left=0>
  100.  
  101. <img src="puppy.gif" border=0 height=50 width=50>
  102.  
  103. </layer>
  104.  
  105. </body>
  106.  
  107. </html>
  108.  
  109.